import React, { Component } from 'react';
import {
    Flex,
    InputItem,
    Button
} from 'antd-mobile';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import Filter from './filter';

import { spec_filter, spec_btn } from './storesFilter.less';
import {Toast} from "antd-mobile/lib/index";


class StoresFilter extends Component {
    constructor(props) {
        super(props);
    }


    reset = () => {
        const { specList, dispatch } = this.props;
        const mapedList = specList.map(specItem => {
            const specValueList = specItem.specValueList.map(specValue => {
                specValue.check = false;
                return specValue;
            })
            specItem.specValueList = specValueList;
            return specItem;
        });
        dispatch({ type:"storesShow/save", data:{ minimumPrice:"", maximumPrice:"", specList:mapedList } });
    }

    submit = () => {
        this.props.onOpenChange();
    }

    render() {
        const { specList, dispatch, minimumPrice, maximumPrice} = this.props;

        return (
            <Flex style={{
                height:"100%",
                backgroundColor:'#fff'
            }} direction="column"
            >

                <CanChangeScroll wrapperId="filterWraperId" targetId="fliterTargetId" className={ spec_filter }>
                    <div className='price_filter'>
                        <div className="title">价格区间（元）</div>
                        <Flex justify="between">
                            <input
                                className="price_input"
                                type="number"
                                placeholder="最低价"
                                min="0"
                                onChange={(e) => {
                                    if(e.target.value<0){
                                        Toast.info("最低价不能小于0",1.5)
                                    }else{
                                        dispatch({ type:"storesShow/save", data:{ minimumPrice:e.target.value } })
                                    }

                                }}
                                value={ minimumPrice }
                            />
                            <div className="price_line"></div>
                            <input
                                type="number"
                                className="price_input"
                                placeholder="最高价"
                                value={ maximumPrice }
                                onChange={(e) => { dispatch({ type:"storesShow/save", data:{ maximumPrice:e.target.value } }) }}
                            />
                        </Flex>
                    </div>

                    <div className='specList'>
                        <div style={{ padding:'0rem 0.2rem' }}>
                            {
                                specList.map((spec, index) => {

                                    return <Filter dispatch={dispatch} spec={spec} key={index} index={index} />
                                })
                            }
                        </div>
                    </div>
                </CanChangeScroll>


                <Flex className={ spec_btn }>
                    <Flex.Item  onClick={this.reset}>
                        重置
                    </Flex.Item>
                    <Flex.Item style={{ backgroundColor:"#ff0036", color:"#fff" }} onClick={this.submit}>
                        确定
                    </Flex.Item>
                </Flex>
            </Flex>
        )
    }
}

export default StoresFilter;
